<template>
	<div id="app">
		<transition :name="transitionName">
			
			<router-view v-if="isRouterAlive"></router-view>
			
		</transition>
		
	</div>
</template>

<script>
	export default {
		name: "test",
		provide(){
			return{
				reload:this.reload
			}
		},
		data() {
			return {
				isRouterAlive:true,
				active: 0,
				msg: '111',
				transitionName: '', //向前划还是向后
			};
		},
		methods:{
			reload(){
				this.isRouterAlive=false;
				this.$nextTick(function(){
					this.isRouterAlive=true;
				})
			}
		},
		watch: { //使用watch 监听$router的变化
			$route(to, from) {
				//如果to索引大于from索引,判断为前进状态,反之则为后退状态
				if (to.meta.index > from.meta.index) {
					this.transitionName = 'slide-left';
				} else if (to.meta.index < from.meta.index) {
					this.transitionName = 'slide-right';
				} else {
					this.transitionName = 'slide-none';
				}
			}
		}

	}
</script>

<style lang="less">
	body {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		background-color: #f4f4f4;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
	}


	.slide-right-enter-active,
	.slide-right-leave-active,
	.slide-left-enter-active,

	.slide-left-leave-active {
		will-change: transform;
		transition: 400ms;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.slide-right-enter {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.slide-right-leave-active {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.slide-left-enter {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.slide-left-leave-active {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}
</style>
